<template>
    <div class="list-group-item">
       <p>{{item.content}}</p>
       <div class="clearfix">
           <p class="pull-left">
                评论人:{{item.author}}
            </p>
            <p class="pull-right">
                评论时间:{{item.posttime}}
            </p>
       </div>
       <div class="clearfix">
           <button @click="delHandle(item.id)" class="btn btn-xs btn-danger pull-right">删除</button>
       </div>
    </div>
</template>
<script>
// 导入vuex相关方法
import {mapState,mapMutations,mapActions} from 'vuex'
export default{
    data(){
        return {
            
        }
    },
    props:['item'],
    methods:{
        // 将this.delComment(id)映射成this.$store.commit('delComment',id);
        ...mapMutations(['delComment']),
        delHandle(id){
            // 通过this.$emit()触发父组件中的自定义事件, 从而将要删除的comment的id传递给父组件
            // this.$emit('delComment',id)
            // 直接调用vuex的mutations中的delComment()方法
            this.delComment(id);
        }
    }
}
</script>
<style scoped lang="css">

</style>